<template>
  <fl-navBar
    dark
    :border="false"
    title="听课评价"
    left-icon="left"
    color="#333333"
    :fixed="true"
    background-color="#fff"
    status-bar
  />
  <view class="courseEvaluateDetail">
    <view class="coursecontent">
      <uni-collapse v-model="openInfo" ref="collapse">
        <uni-collapse-item
          name="1"
          border
          class="collapse-item"
          title-border="none"
          :border="false"
        >
          <template v-slot:title>
            <view class="doc_msg">
              <text class="line"></text>
              <text class="doc_title">基础信息</text>
            </view>
          </template>
          <view class="detail_content">
            <view class="detail_item">
              <text class="item_key">任务名称</text>
              <text class="item_value">{{ form.taskName }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">被听课老师</text>
              <text class="item_value">{{ form.teacherUserName }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">听课班级</text>
              <text class="item_value">{{ form.className }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">听课日期</text>
              <text class="item_value">{{ form.listenCourseDate }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">听课时间</text>
              <text class="item_value">{{ form.startTime + "-" + form.endTime }}</text>
            </view>
            <view class="detail_item">
              <text class="item_key">课程</text>
              <text class="item_value">{{ form.courseName }}</text>
            </view>
            <view
              v-if="!(params.typeUser === '2' && params.status === '0')"
              class="detail_item"
              style="display: flex; flex-direction: column"
            >
              <text class="item_key" style="margin-bottom: 10rpx">教学大纲</text>
              <view class="fileWrap">
                <uni-file-picker
                  v-if="closeShow"
                  @select="handleUpload($event, 0)"
                  v-model="fileList[0]"
                  :auto-upload="true"
                  file-mediatype="all"
                  mode="list"
                />
                <fl-fileList
                  v-if="fileList[0].length > 0"
                  @delFileItem="delFileItem"
                  :closeShow="closeShow"
                  :type="0"
                  :fileList="fileList[0]"
                />
              </view>
            </view>
            <view
              v-if="!(params.typeUser === '2' && params.status === '0')"
              class="detail_item"
              style="display: flex; flex-direction: column"
            >
              <text class="item_key" style="margin-bottom: 10rpx">教学进度表</text>
              <view class="fileWrap">
                <uni-file-picker
                  v-if="closeShow"
                  @select="handleUpload($event, 1)"
                  v-model="fileList[1]"
                  :auto-upload="true"
                  file-mediatype="all"
                  mode="list"
                />
                <fl-fileList
                  v-if="fileList[1].length > 0"
                  @delFileItem="delFileItem"
                  :closeShow="closeShow"
                  :type="1"
                  :fileList="fileList[1]"
                />
              </view>
            </view>
            <view
              v-if="!(params.typeUser === '2' && params.status === '0')"
              class="detail_item"
              style="display: flex; flex-direction: column"
            >
              <text class="item_key" style="margin-bottom: 10rpx">其他材料</text>
              <view class="fileWrap">
                <uni-file-picker
                  v-if="closeShow"
                  @select="handleUpload($event, 2)"
                  v-model="fileList[2]"
                  :auto-upload="true"
                  file-mediatype="all"
                  mode="list"
                />
                <fl-fileList
                  :type="2"
                  v-if="fileList[2].length > 0"
                  @delFileItem="delFileItem"
                  :closeShow="closeShow"
                  :fileList="fileList[2]"
                />
              </view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <uni-collapse
        v-if="
          (params.typeUser === '1' && (params.status === '1' || params.status === '2')) ||
          params.typeUser === '3'
        "
        v-model="openInfos"
        ref="collapse"
      >
        <uni-collapse-item
          name="2"
          border
          class="collapse-item"
          title-border="none"
          :border="false"
        >
          <template v-slot:title>
            <view class="doc_msg">
              <text class="line"></text>
              <text class="doc_title">督导听课评价表</text>
            </view>
          </template>
          <view class="detail_content">
            <uni-forms
              label-width="250px"
              label-position="top"
              :rules="customRules"
              ref="valiForm"
              :modelValue="forms"
            >
              <uni-forms-item label="课题" required name="topic">
                <uni-easyinput
                  :clearable="false"
                  v-model="forms.topic"
                  placeholder="请输入课题"
                />
              </uni-forms-item>
              <uni-forms-item label="是否公开课" required name="isPublic">
                <uni-data-select
                  :clear="false"
                  v-model="forms.isPublic"
                  :localdata="[
                    { text: '否', value: '0' },
                    { text: '是', value: '1' },
                  ]"
                ></uni-data-select>
              </uni-forms-item>
              <uni-forms-item label="主要教学过程及摘要" required name="content">
                <uni-easyinput
                  type="textarea"
                  v-model="forms.content"
                  placeholder="请输入主要教学过程及摘要"
                />
              </uni-forms-item>
              <uni-forms-item label="分析意见" required name="analysis">
                <uni-easyinput
                  type="textarea"
                  v-model="forms.analysis"
                  placeholder="请输入分析意见"
                />
              </uni-forms-item>
              <uni-forms-item label="教学常规执行情况" required name="executeSituation">
                <uni-easyinput
                  type="textarea"
                  v-model="forms.executeSituation"
                  placeholder="请输入教学常规执行情况"
                />
              </uni-forms-item>
              <uni-forms-item
                label="课堂氛围、教学纪律与学生学习情况"
                required
                name="learningSituation"
              >
                <uni-easyinput
                  type="textarea"
                  v-model="forms.learningSituation"
                  placeholder="请输入课堂氛围、教学纪律与学生学习情况"
                />
              </uni-forms-item>
              <uni-forms-item label="学生迟到人数" required name="lateNum">
                <uni-easyinput
                  type="number"
                  :clearable="false"
                  v-model="forms.lateNum"
                  placeholder="请输入学生迟到人数"
                />
              </uni-forms-item>
              <uni-forms-item label="最多迟到时间" required name="lateTime">
                <uni-easyinput
                  type="number"
                  :clearable="false"
                  v-model="forms.lateTime"
                  placeholder="请输入分钟"
                />
              </uni-forms-item>
              <uni-forms-item label="教学场所环境及卫生" required name="environmentScore">
                <uni-easyinput
                  :clearable="false"
                  type="number"
                  v-model="forms.environmentScore"
                  placeholder="请输入评分"
                />
              </uni-forms-item>
              <uni-forms-item label="对本课的意见和建议" required name="feedback">
                <uni-easyinput
                  type="textarea"
                  v-model="forms.feedback"
                  placeholder="请输入对本课的意见和建议"
                />
              </uni-forms-item>
              <uni-forms-item label="综合评分" required name="totalScore">
                <uni-easyinput
                  type="textarea"
                  v-model="forms.totalScore"
                  placeholder="请输入综合评分"
                />
              </uni-forms-item>
              <uni-forms-item label="日期" required name="date">
                <uni-datetime-picker
                  type="date"
                  :clear-icon="false"
                  v-model="forms.date"
                />
              </uni-forms-item>
              <uni-forms-item label="听课材料" required>
                <uni-file-picker
                  v-if="params.status === '1'"
                  @select="handleUpload($event, 3)"
                  v-model="fileList[3]"
                  :auto-upload="true"
                  file-mediatype="all"
                  mode="list"
                />
                <fl-fileList
                  v-if="fileList[3].length > 0"
                  @delFileItem="delFileItem"
                  :closeShow="closeShowTingke"
                  :type="3"
                  :fileList="fileList[3]"
                />
              </uni-forms-item>
            </uni-forms>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
  <view class="confire" :style="{ bottom: safeAreaInsets.bottom + 'px' }">
    <button
      style="width: 90%"
      v-if="params.typeUser === '2' && params.status === '1'"
      type="primary"
      @tap="handleUpdate"
    >
      提 交
    </button>
    <!-- 督导人员 进行中  填写督导听课评价表 提交按钮 -->
    <button
      style="width: 90%"
      v-if="params.typeUser === '1' && params.status === '1'"
      type="primary"
      @click="submit('valiForm')"
    >
      提 交
    </button>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { fileUpload } from "@/api/http";
import { navigateBack } from "@/utils/ruoyi";
import {
  editTeacherEvalTask,
  listenCourseEvalTask,
} from "@/api/courseEvaluateCont/received";
import FileList from "@/pages/courseEvaluateDetail/fileList.vue";
import { getToken } from "@/utils/auth";
import { upload } from "@/utils/upload";
const { safeAreaInsets } = uni.getSystemInfoSync();
import modal from "@/plugins/modal";
const openInfo = ref(["1"]);
const openInfos = ref(["2"]);
const current = ref(0);
const closeShow = ref(true);
const closeShowTingke = ref(true);
const collapse = ref();
const form = ref({});
const forms = ref({});
const params = ref({});
const valiForm = ref();
const fileList = ref({
  0: [],
  1: [],
  2: [],
  3: [],
});
const customRules = {
  topic: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  isPublic: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  content: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  analysis: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  executeSituation: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  learningSituation: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  lateNum: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  lateTime: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  environmentScore: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  feedback: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  totalScore: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
  date: {
    rules: [
      {
        required: true,
        errorMessage: " ",
      },
    ],
  },
};
const list = ref([
  {
    id: 0,
    name: "执行情况",
  },
  {
    id: 1,
    name: "详情",
  },
  {
    id: 2,
    name: "督导组附件",
  },
  {
    id: 3,
    name: "教师附件",
  },
]);
function tabsChange(index) {
  current.value = index;
}
function submit(ref) {
  valiForm.value
    .validate()
    .then(async (res) => {
      if (fileList.value[3].length === 0) return modal.msgError("请上传听课材料");
      let cur = uni.getStorageSync("courses");
      let checker = cur.checker;
      let evalTaskId = cur.evalTaskId;
      let id = cur.id;
      let par = {
        ...res,
        checker,
        evalTaskId,
        id,
        tkclFilePath: JSON.stringify(fileList.value[3]),
      };
      await listenCourseEvalTask(par);
      uni.$emit("load");
      modal.msgSuccess("操作成功");
      setTimeout(() => {
        navigateBack();
      }, 500);
    })
    .catch((err) => {
      console.log(err);
    });
}
const delFileItem = (a, b) => {
  fileList.value[b].splice(a, 1);
};
onLoad((options) => {
  params.value = options;
  let cur = uni.getStorageSync("courses");
  if (options.typeUser === "1") {
    form.value = { ...cur.eduListenCourseEvalTaskVo };
    // 督导人员 已完成 的
    if (options.status === "2") {
      forms.value = { ...cur };
      fileList.value[3] = JSON.parse(cur.tkclFilePath);
      closeShowTingke.value = false;
    }
  } else if (options.typeUser === "2") {
    form.value = { ...cur };
  } else if (options.typeUser === "3") {
    // 申诉时 进来 通过或驳回
    form.value = { ...cur };
    fileList.value[0] = JSON.parse(cur.jxdgFilePath);
    fileList.value[1] = JSON.parse(cur.jxjdbFilePath);
    fileList.value[2] = JSON.parse(cur.otherFilePath);
    closeShow.value = false;
  }

  // 督导人员  已完成
  if (options.typeUser === "2" && options.status === "2") {
    fileList.value[0] = JSON.parse(cur.jxdgFilePath);
    fileList.value[1] = JSON.parse(cur.jxjdbFilePath);
    fileList.value[2] = JSON.parse(cur.otherFilePath);
    closeShow.value = false;
  }
  // 被听课老师  直接展示不需要 判断status状态
  if (options.typeUser === "1") {
    (fileList.value[0] = JSON.parse(cur.eduListenCourseEvalTaskVo.jxdgFilePath || "[]")),
      (fileList.value[1] = JSON.parse(
        cur.eduListenCourseEvalTaskVo.jxjdbFilePath || "[]"
      )),
      (fileList.value[2] = JSON.parse(
        cur.eduListenCourseEvalTaskVo.otherFilePath || "[]"
      )),
      (closeShow.value = false);
  }
});
async function handleUpload(e, type) {
  let tempFilePaths = e.tempFilePaths;
  tempFilePaths.forEach(async (ele, index) => {
    const res = await upload({ filePath: ele });
    const re = res.data[0];
    fileList.value[type].push({ ...re });
    nextTick(() => {
      collapse.value.resize();
    });
    modal.msgSuccess("上传成功");
  });
}
async function handleUpdate() {
  if (fileList.value[0].length === 0) return modal.msgError("请上传教学大纲");
  if (fileList.value[1].length === 0) return modal.msgError("请上传教学进度表");
  if (fileList.value[2].length === 0) return modal.msgError("请上传其他材料");
  let par = {
    id: form.value.id,
    jxdgFilePath: JSON.stringify(fileList.value[0]),
    jxjdbFilePath: JSON.stringify(fileList.value[1]),
    otherFilePath: JSON.stringify(fileList.value[2]),
  };
  await editTeacherEvalTask(par);
  uni.$emit("load");
  modal.msgSuccess("操作成功");
  setTimeout(() => {
    navigateBack();
  }, 500);
}
</script>

<style lang="scss" scoped>
page {
  display: flex;
  flex-direction: column;
}
.fileWrap {
  display: flex;
  flex-direction: column;
}
.confire {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}
.courseEvaluateDetail {
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  .coursecontent {
    overflow-y: scroll;
    height: 100%;
    padding-bottom: 200rpx;
  }
  .course_contentItem {
    margin-top: 40rpx;
  }
  .zxqk {
    display: flex;
    height: 100%;
    .zxqk_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      flex-wrap: wrap;
      .statustext {
        margin-top: 10rpx;
      }
      .statusItem {
        position: relative;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        .playStstus {
          position: absolute;
          top: 50%;
          width: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 24rpx;
          text-align: center;
        }
        .statusImg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ddzfile {
    display: flex;
    flex-wrap: wrap;
    .ddzfile_item {
      display: flex;
      justify-content: center;
      width: 50%;
      margin-bottom: 30rpx;

      img {
        width: 60rpx;
        height: 66rpx;
        margin-right: 26rpx;
      }
      .pdfNamebox {
        .pdfName {
          width: 220rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .pdfSize {
          font-size: 24rpx;
          color: #3f3f3f;
          margin-top: 6rpx;
        }
      }
    }
  }
  .collapse-item {
    height: 100%;
    background-color: #fff;
    .detail_content {
      width: 710rpx;
      margin: 0 auto;
      background-color: #fff;
      .coursecontent_tabs {
        margin-top: 20rpx;
      }

      .detail_item {
        display: flex;
        padding: 20rpx 10rpx;
        background-color: #fff;
        border-bottom: 2rpx solid #ebedf0;

        .item_key,
        .item_value {
          color: #666666;
          font-size: 28rpx;
        }
        .item_key {
          width: 180rpx;
        }
        .item_value {
          flex: 1;
          color: #333333;
        }
      }
    }
    .doc_msg {
      display: flex;
      align-items: center;
      height: 100rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #000;
      padding-left: 25rpx;

      .line {
        width: 6rpx;
        height: 30rpx;
        background-color: #2362a6;
        margin-right: 12rpx;
      }
    }
  }
}
</style>
